<template>
  <view>
    <u-navbar title="我的账户" back-icon-size="34" title-size="36" :border-bottom="false"></u-navbar>
    <view class="" style="margin: 28rpx; box-shadow: 0px 0px 10rpx 0px rgba(70, 70, 70, 0.05); background: #fff; border-radius: 20rpx; padding-bottom: 35rpx">
      <view class="" style="font-size: 28rpx; padding: 30rpx">充值金额</view>
      <view class="" style="margin: 0 33rpx; display: flex; align-items: center; border-bottom: 1rpx solid #e7e7e7; justify-content: space-between">
        <input type="number" style="height: 80rpx; border-radius: 16rpx; padding-left: 32rpx; font-size: 32rpx; width: 300rpx" placeholder="￥请输入整数" v-model="num" />
        <view class="" style="font-size: 30rpx; color: #999">余额：￥{{ userinfo.money }}</view>
      </view>
      <view class="" style="font-size: 24rpx; color: #666666; padding-left: 36rpx; padding-top: 16rpx">
        <!-- 当前余额：100.00 -->
      </view>
    </view>

    <view class="" style="background: #fff; border-radius: 20rpx; margin: 0 28rpx">
      <view class="" style="font-size: 32rpx; padding: 46rpx 31rpx">充值方式</view>
      <view class="" @tap="radio = 1" style="display: flex; align-items: center; padding: 0rpx 33rpx; justify-content: space-between">
        <view class="" style="display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/wxpay.png" mode="" style="width: 68upx; height: 68upx"></image>
          <view class="" style="padding-left: 14rpx">微信</view>
        </view>
        <radio :checked="radio == 1 ? true : false" color="#FF6572" style="transform: scale(0.7)"></radio>
      </view>
      <view class="" @tap="radio = 0" style="display: flex; align-items: center; padding: 33rpx 33rpx; justify-content: space-between">
        <view class="" style="display: flex; align-items: center">
          <image src="https://wenzhen.jiangkukeji360.com/static/index/zfbpay.png" mode="" style="width: 68upx; height: 68upx"></image>
          <view class="" style="padding-left: 14rpx">支付宝</view>
        </view>

        <radio :checked="radio == 0 ? true : false" color="#FF6572" style="transform: scale(0.7)"></radio>
      </view>
    </view>

    <view class="btn" @tap="boss">确定</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radio: 1,
      wechat: {},
      alipay: {},
      content: '',
      num: '',
      show: false,
      userinfo: {}
    };
  },
  methods: {
    boss() {
      if (this.num == '') {
        uni.showToast({
          title: '请输入要充值的金额',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api//shop/payMoney',
          method: 'post',
          data: {
            price: this.num,
            pay_type: this.radio == 1 ? 'wechat' : 'alipay',
            source: 'app'
          }
        }).then((res) => {
          uni.requestPayment({
            provider: this.type == 1 ? 'wxpay' : 'alipay',
            orderInfo: res.data.response, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
            success: function (res) {
              uni.navigateTo({
                url: '/pages/shop/paysucc?type=1'
              });
            },
            fail: function (err) {
              uni.navigateTo({
                url: '/pages/shop/paysucc?type=2'
              });
            }
          });
        });
      }
    },
    user() {
      this.api({
        url: '/api/shop/home',
        method: 'post'
      }).then((res) => {
        this.userinfo = res.data;
      });
    }
  },
  onShow() {
    this.user();
  }
};
</script>

<style>
page {
  background: #f7f7f7;
}
.btn {
  height: 82rpx;
  background: linear-gradient(0deg, #e50014, #ff6572);
  border-radius: 41rpx;
  text-align: center;
  line-height: 82rpx;
  color: #fff;
  margin: 125rpx;
}
</style>
